<template>
  
  <div style="width: 100%; height: 100%" class="page-layout"> 
    <h1>DvChartCloud</h1>
    <p>标签云： echart标签云为第三方插件，dv-chart-cloud 已整合</p>

    <h2>标签云 settings 配置</h2>
    <pre> 
      {
        dataHelper: {
          type: [Object, Function]
        },
        autoColor: {
          type: Boolean,
          default: true
        }
      }
    </pre>   
    <h2>example</h2>
    <div> 
      使用mask: <input type="checkbox" name="mask" v-model="isMask"> 
    </div>
    <div style="width: 1000px;  ">
      <demo-warp>
        <dv-page target="parent" fit> 
          <dv-box x-align="center" y-align="middle" width="80%" height="80%"  >
           
            <dv-chart-cloud :data="data" fit debug :extend="extend"></dv-chart-cloud>
          </dv-box>
        </dv-page>
      </demo-warp>
    </div> 
    <div>数据：</div>
    <textarea readonly style="width: 800px; height: 100px" v-model="listData"></textarea>
    <div>mask图片URL：</div>
    <textarea readonly style="width: 800px; height: 100px" v-model="imgUrl"></textarea>
    <div>例子：</div>
    <textarea readonly style="width: 800px; height: 400px" >
      <dv-chart-cloud :data="data" fit debug :extend="extend"></dv-chart-cloud>

      const imgUrl = ref(image1) 
      const maskResource = new Image();
      maskResource.src = image1;

      const data = computed(() => {
        const _list = list.map((item) => {
          return [item.name, item.value]
        })
        return {
          rows: _list
        }
      })

      const maskExtend = {
        'series.0.maskImage': maskResource,
        'series.0.sizeRange': [6, 78],
        'series.0.rotationRange': [-45, 90],
        'series.0.width': '600px'
      }
      const isMask = ref(false)

      const extend = computed(() => {
        if (isMask.value) {
          return {...maskExtend}
        } else {
          return {}
        }
      }) 
    </textarea>
    <br/><br/>
    <h2>更多个性化配置</h2>
    <p>参考 图表组件 extend配置的用法， <router-link to="/example/extend-use">extend 配置使用</router-link></p>
    <br/><br/>
  </div> 

    <!--  -->
</template>
<script setup lang="ts" >
import { ref, computed } from 'vue';
import { DvPage, DvBox, DvChartCloud } from '$comp/index';
 
const image1 = '';

const imgUrl = ref(image1)

const maskResource = new Image();
maskResource.src = image1;
const list = [
  {
        name: '花鸟市场',
        value: 1446,
    },
    {
        name: '汽车',
        value: 928,
    },
    {
        name: '视频',
        value: 906,
    },
    {
        name: '电视',
        value: 825,
    },
    {
        name: 'Lover Boy 88',
        value: 514,
    },
    {
        name: '动漫',
        value: 486,
    },
    {
        name: '音乐',
        value: 5999,
    },
    {
        name: '直播',
        value: 163,
    },
    {
        name: '广播电台',
        value: 86,
    },
    {
        name: '戏曲曲艺',
        value: 17,
    },
    {
        name: '演出票务',
        value: 6,
    },
    {
        name: '给陌生的你听',
        value: 1,
    },
    {
        name: '资讯',
        value: 1437,
    },
    {
        name: '商业财经',
        value: 422,
    },
    {
        name: '娱乐八卦',
        value: 353,
    },
    {
        name: '军事',
        value: 331,
    },
    {
        name: '科技资讯',
        value: 313,
    },
    {
        name: '社会时政',
        value: 307,
    },
    {
        name: '时尚',
        value: 43,
    },
    {
        name: '网络奇闻',
        value: 15,
    },
    {
        name: '旅游出行',
        value: 438,
    },
    {
        name: '景点类型',
        value: 957,
    },
    {
        name: '国内游',
        value: 927,
    },
    {
        name: '远途出行方式',
        value: 908,
    },
    {
        name: '酒店',
        value: 693,
    },
    {
        name: '关注景点',
        value: 611,
    },
    {
        name: '旅游网站偏好',
        value: 512,
    },
    {
        name: '出国游',
        value: 382,
    },
    {
        name: '交通票务',
        value: 312,
    },
    {
        name: '旅游方式',
        value: 187,
    },
    {
        name: '旅游主题',
        value: 163,
    },
    {
        name: '港澳台',
        value: 104,
    },
    {
        name: '本地周边游',
        value: 3,
    },
    {
        name: '小卖家',
        value: 1331,
    },
    {
        name: '全日制学校',
        value: 941,
    },
    {
        name: '基础教育科目',
        value: 585,
    },
    {
        name: '考试培训',
        value: 473,
    },
    {
        name: '语言学习',
        value: 358,
    },
    {
        name: '留学',
        value: 246,
    },
    {
        name: 'K12课程培训',
        value: 207,
    },
    {
        name: '艺术培训',
        value: 194,
    },
    {
        name: '技能培训',
        value: 104,
    },
    {
        name: 'IT培训',
        value: 87,
    },
    {
        name: '高等教育专业',
        value: 63,
    },
    {
        name: '家教',
        value: 48,
    },
    {
        name: '体育培训',
        value: 23,
    },
    {
        name: '职场培训',
        value: 5,
    },
    {
        name: '金融财经',
        value: 1328,
    },
    {
        name: '银行',
        value: 765,
    },
    {
        name: '股票',
        value: 452,
    },
    {
        name: '保险',
        value: 415,
    },
    {
        name: '贷款',
        value: 253,
    },
    {
        name: '基金',
        value: 211,
    },
    {
        name: '信用卡',
        value: 180,
    },
    {
        name: '外汇',
        value: 138,
    },
    {
        name: 'P2P',
        value: 116,
    },
    {
        name: '贵金属',
        value: 98,
    },
    {
        name: '债券',
        value: 93,
    },
    {
        name: '网络理财',
        value: 92,
    },
    {
        name: '信托',
        value: 90,
    },
    {
        name: '征信',
        value: 76,
    },
    {
        name: '期货',
        value: 76,
    },
    {
        name: '公积金',
        value: 40,
    },
    {
        name: '银行理财',
        value: 36,
    },
    {
        name: '银行业务',
        value: 30,
    },
    {
        name: '典当',
        value: 7,
    },
    {
        name: '海外置业',
        value: 1,
    },
    {
        name: '汽车',
        value: 1309,
    },
    {
        name: '汽车档次',
        value: 965,
    },
    {
        name: '汽车品牌',
        value: 900,
    },
    {
        name: '汽车车型',
        value: 727,
    },
    {
        name: '购车阶段',
        value: 461,
    },
    {
        name: '二手车',
        value: 309,
    },
    {
        name: '汽车美容',
        value: 260,
    },
    {
        name: '新能源汽车',
        value: 173,
    },
    {
        name: '汽车维修',
        value: 155,
    },
    {
        name: '租车服务',
        value: 136,
    },
    {
        name: '车展',
        value: 121,
    },
    {
        name: '违章查询',
        value: 76,
    },
    {
        name: '汽车改装',
        value: 62,
    },
    {
        name: '汽车用品',
        value: 37,
    },
    {
        name: '路况查询',
        value: 32,
    },
    {
        name: '汽车保险',
        value: 28,
    },
    {
        name: '陪驾代驾',
        value: 4,
    },
    {
        name: '网络购物',
        value: 1275,
    },
    {
        name: '做我的猫',
        value: 1088,
    },
    {
        name: '只想要你知道',
        value: 907,
    },
    {
        name: '团购',
        value: 837,
    },
    {
        name: '比价',
        value: 201,
    },
    {
        name: '海淘',
        value: 195,
    },
    {
        name: '移动APP购物',
        value: 179,
    },
    {
        name: '支付方式',
        value: 119,
    },
    {
        name: '代购',
        value: 43,
    },
    {
        name: '体育健身',
        value: 1234,
    },
    {
        name: '体育赛事项目',
        value: 802,
    },
    {
        name: '运动项目',
        value: 405,
    },
    {
        name: '体育类赛事',
        value: 337,
    },
    {
        name: '健身项目',
        value: 199,
    },
    {
        name: '健身房健身',
        value: 78,
    },
    {
        name: '运动健身',
        value: 77,
    },
    {
        name: '家庭健身',
        value: 36,
    },
    {
        name: '健身器械',
        value: 29,
    },
    {
        name: '办公室健身',
        value: 3,
    },
    {
        name: '商务服务',
        value: 1201,
    },
    {
        name: '法律咨询',
        value: 508,
    },
    {
        name: '化工材料',
        value: 147,
    },
    {
        name: '广告服务',
        value: 125,
    },
    {
        name: '会计审计',
        value: 115,
    },
    {
        name: '人员招聘',
        value: 101,
    },
    {
        name: '印刷打印',
        value: 66,
    },
    {
        name: '知识产权',
        value: 32,
    },
    {
        name: '翻译',
        value: 22,
    },
    {
        name: '安全安保',
        value: 9,
    },
    {
        name: '公关服务',
        value: 8,
    },
    {
        name: '商旅服务',
        value: 2,
    },
    {
        name: '展会服务',
        value: 2,
    },
    {
        name: '特许经营',
        value: 1,
    },
    {
        name: '休闲爱好',
        value: 1169,
    },
    {
        name: '收藏',
        value: 412,
    },
    {
        name: '摄影',
        value: 393,
    },
    {
        name: '温泉',
        value: 230,
    },
    {
        name: '博彩彩票',
        value: 211,
    },
    {
        name: '美术',
        value: 207,
    },
    {
        name: '书法',
        value: 139,
    },
    {
        name: 'DIY手工',
        value: 75,
    },
    {
        name: '舞蹈',
        value: 23,
    },
    {
        name: '钓鱼',
        value: 21,
    },
    {
        name: '棋牌桌游',
        value: 17,
    },
    {
        name: 'KTV',
        value: 6,
    },
    {
        name: '密室',
        value: 5,
    },
    {
        name: '采摘',
        value: 4,
    },
    {
        name: '电玩',
        value: 1,
    },
    {
        name: '真人CS',
        value: 1,
    },
    {
        name: '轰趴',
        value: 1,
    },
    {
        name: '家电数码',
        value: 1111,
    },
    {
        name: '手机',
        value: 885,
    },
    {
        name: '电脑',
        value: 543,
    },
    {
        name: '大家电',
        value: 321,
    },
    {
        name: '家电关注品牌',
        value: 253,
    },
    {
        name: '网络设备',
        value: 162,
    },
    {
        name: '摄影器材',
        value: 149,
    },
    {
        name: '影音设备',
        value: 133,
    },
    {
        name: '办公数码设备',
        value: 113,
    },
    {
        name: '生活电器',
        value: 67,
    },
    {
        name: '厨房电器',
        value: 54,
    },
    {
        name: '智能设备',
        value: 45,
    },
    {
        name: '个人护理电器',
        value: 22,
    },
    {
        name: '服饰鞋包',
        value: 1047,
    },
    {
        name: '服装',
        value: 566,
    },
    {
        name: '饰品',
        value: 289,
    },
    {
        name: '鞋',
        value: 184,
    },
    {
        name: '箱包',
        value: 168,
    },
    {
        name: '奢侈品',
        value: 137,
    },
    {
        name: '母婴亲子',
        value: 1041,
    },
    {
        name: '孕婴保健',
        value: 505,
    },
    {
        name: '母婴社区',
        value: 299,
    },
    {
        name: '早教',
        value: 103,
    },
    {
        name: '奶粉辅食',
        value: 66,
    },
    {
        name: '童车童床',
        value: 41,
    },
    {
        name: '关注品牌',
        value: 271,
    },
    {
        name: '宝宝玩乐',
        value: 30,
    },
    {
        name: '母婴护理服务',
        value: 25,
    },
    {
        name: '纸尿裤湿巾',
        value: 16,
    },
    {
        name: '妈妈用品',
        value: 15,
    },
    {
        name: '宝宝起名',
        value: 12,
    },
    {
        name: '童装童鞋',
        value: 9,
    },
    {
        name: '胎教',
        value: 8,
    },
    {
        name: '宝宝安全',
        value: 1,
    },
    {
        name: '宝宝洗护用品',
        value: 1,
    },
    {
        name: '软件应用',
        value: 1018,
    },
    {
        name: '系统工具',
        value: 896,
    },
    {
        name: '理财购物',
        value: 440,
    },
    {
        name: '生活实用',
        value: 365,
    },
    {
        name: '影音图像',
        value: 256,
    },
    {
        name: '社交通讯',
        value: 214,
    },
    {
        name: '手机美化',
        value: 39,
    },
    {
        name: '办公学习',
        value: 28,
    },
    {
        name: '应用市场',
        value: 23,
    },
    {
        name: '母婴育儿',
        value: 14,
    },
    {
        name: '游戏',
        value: 946,
    },
    {
        name: '手机游戏',
        value: 565,
    },
    {
        name: 'PC游戏',
        value: 353,
    },
    {
        name: '网页游戏',
        value: 254,
    },
    {
        name: '游戏机',
        value: 188,
    },
    {
        name: '模拟辅助',
        value: 166,
    },
    {
        name: '个护美容',
        value: 942,
    },
    {
        name: '护肤品',
        value: 177,
    },
    {
        name: '彩妆',
        value: 133,
    },
    {
        name: '美发',
        value: 80,
    },
    {
        name: '香水',
        value: 50,
    },
    {
        name: '个人护理',
        value: 46,
    },
    {
        name: '美甲',
        value: 26,
    },
    {
        name: 'SPA美体',
        value: 21,
    },
    {
        name: '花鸟萌宠',
        value: 914,
    },
    {
        name: '绿植花卉',
        value: 311,
    },
    {
        name: '狗',
        value: 257,
    },
    {
        name: '其他宠物',
        value: 131,
    },
    {
        name: '水族',
        value: 125,
    },
    {
        name: '猫',
        value: 122,
    },
    {
        name: '动物',
        value: 81,
    },
    {
        name: '鸟',
        value: 67,
    },
    {
        name: '宠物用品',
        value: 41,
    },
    {
        name: '宠物服务',
        value: 26,
    },
    {
        name: '书籍阅读',
        value: 913,
    },
    {
        name: '网络小说',
        value: 483,
    },
    {
        name: '关注书籍',
        value: 128,
    },
    {
        name: '文学',
        value: 105,
    },
    {
        name: '报刊杂志',
        value: 77,
    },
    {
        name: '人文社科',
        value: 22,
    },
    {
        name: '建材家居',
        value: 907,
    },
    {
        name: '装修建材',
        value: 644,
    },
    {
        name: '家具',
        value: 273,
    },
    {
        name: '家居风格',
        value: 187,
    },
    {
        name: '家居家装关注品牌',
        value: 140,
    },
    {
        name: '家纺',
        value: 107,
    },
    {
        name: '厨具',
        value: 47,
    },
    {
        name: '灯具',
        value: 43,
    },
    {
        name: '家居饰品',
        value: 29,
    },
    {
        name: '家居日常用品',
        value: 10,
    },
    {
        name: '生活服务',
        value: 883,
    },
    {
        name: '物流配送',
        value: 536,
    },
    {
        name: '家政服务',
        value: 108,
    },
    {
        name: '摄影服务',
        value: 49,
    },
    {
        name: '搬家服务',
        value: 38,
    },
    {
        name: '物业维修',
        value: 37,
    },
    {
        name: '婚庆服务',
        value: 24,
    },
    {
        name: '二手回收',
        value: 24,
    },
    {
        name: '鲜花配送',
        value: 3,
    },
    {
        name: '维修服务',
        value: 3,
    },
    {
        name: '殡葬服务',
        value: 1,
    },
    {
        name: '求职创业',
        value: 874,
    },
    {
        name: '创业',
        value: 363,
    },
    {
        name: '目标职位',
        value: 162,
    },
    {
        name: '目标行业',
        value: 50,
    },
    {
        name: '兼职',
        value: 21,
    },
    {
        name: '期望年薪',
        value: 20,
    },
    {
        name: '实习',
        value: 16,
    },
    {
        name: '雇主类型',
        value: 10,
    },
    {
        name: '星座运势',
        value: 789,
    },
    {
        name: '星座',
        value: 316,
    },
    {
        name: '算命',
        value: 303,
    },
    {
        name: '解梦',
        value: 196,
    },
    {
        name: '风水',
        value: 93,
    },
    {
        name: '面相分析',
        value: 47,
    },
    {
        name: '手相',
        value: 32,
    },
    {
        name: '公益',
        value: 90,
    }
]
const listData = ref(JSON.stringify(list)) 

const data = computed(() => {
  const _list = list.map((item) => {
    return [item.name, item.value]
  })
  return {
    rows: _list
  }
})

const maskExtend = {
  'series.0.maskImage': maskResource,
  'series.0.sizeRange': [6, 78],
  'series.0.rotationRange': [-45, 90],
  'series.0.width': '600px'
}
const isMask = ref(false)

const extend = computed(() => {
  if (isMask.value) {
    return {...maskExtend}
  } else {
    return {}
  }
}) 

 

</script>
<style lang="scss" scoped>.page-layout{
  height: 100%;
  
 }
</style>
